<template>
  <div>
    <div ref="pieChart" style="height: 300px;width: 100%;"></div>
  </div>
</template>
<script setup lang="ts">
import * as echarts from 'echarts';
import { onMounted, ref } from 'vue';
const props = defineProps({
  chartDatax: {
    type: Array,
    default: () => []
  },
  chartDatay: {
    type: Array,
    default: () => []
  },
  standard: {
    type: Object,
  }
});
let fixedNumber = 0
let averageNumber = 0
// var chartDatax = reactive([]);
// var chartDatay = reactive([]);
// var dataechart = reactive({});
// const chartData = ref([
//   { value: 60, name: '正常' },
//   { value: 10, name: '偏高' },
//   { value: 30, name: '偏低' }
// ]);    

const pieChart = ref<HTMLElement>();
var myChart: any = null;
function initPieEcharts() {
  fixedNumber = (props.standard?.min).toString().split('.')[1] ? (props.standard?.min).toString().split('.')[1].length : 0
  const min = (props.chartDatay.reduce((a, b) => Math.min(a, b)) * 0.95).toFixed(fixedNumber)
  const max = (props.chartDatay.reduce((a, b) => Math.max(a, b)) * 1.05).toFixed(fixedNumber)
  props.chartDatay.push(props.standard?.min, props.standard?.max)

  // const average = ((max - min) /8).toFixed(fixedNumber)
  const average = Math.ceil((max-min)/8 * Math.pow(10, fixedNumber))/ Math.pow(10, fixedNumber)
  // const average = Math.ceil((8.94-5.87)/7 * Math.pow(10, 2))/ Math.pow(10, 2)
  
  averageNumber = Number(average)
  myChart = echarts.init(pieChart.value);
  const options = {

    // title : {
    //     text: '历史检测记录',
    //     // subtext: '纯属虚构'
    //     show: true,
    //         trigger: 'axis',
    //         // formatter: ':{c}<br>{b}',
    //         // formatter: function (params) {
    //         //     // params 是一个包含当前点信息的数组
    //         //     var res = '详细信息：<br/>';
    //         //     for (var i = 0, l = params.length; i < l; i++) {
    //         //         res += params[i].seriesName + ' : ' + params[i].value + '<br/>';
    //         //     }
    //         //     // 这里可以添加自定义方法
    //         //     res += '自定义方法：' + customMethod(params);
    //         //     return res;
    //         // },
    //         // axisPointer: {
    //         //     type: 'shadow'
    //         // },
    // },
    tooltip: {
      enable: true,
      // show:true,
      trigger: 'axis', //触发类型；轴触发，axis则鼠标hover到一条柱状图显示全部数据，item则鼠标hover到折线点显示相应数据，
      //   axisPointer: {  //坐标轴指示器，坐标轴触发有效，
      //       type: 'line', //默认为line，line直线，cross十字准星，shadow阴影
      // 	crossStyle: {
      //           color: '#fff'
      // 	}
      // },
      // formatter: '{c}<br>{b}111',
      formatter: function (params) {
        // 假设 params 是一个数组，每个元素包含了当前点的数据信息

        let result = `
            <div class='tooltipValue'>${(params[0].value).toString()}</div>
            <div class='tooltipTime'>${params[0].axisValue.replace('.', '/')}</div>
          `;
        return result;
      },
      // axisPointer: {
      //     type: 'shadow'//无
      // },
    },
    grid: {
      left: 50,
      right: 40,
      top: 50,
      bottom: 5,
      containLabel: true
    },
    // legend: {
    //     data:['意向']
    // },
    // toolbox: {
    //     show : true,
    //     feature : {
    //         // mark : {show: true},
    //         // dataView : {show: false, readOnly: false},
    //         // magicType : {show: false, type: ['line', 'bar', 'stack', 'tiled']},
    //         restore : {show: true},
    //         // saveAsImage : {show: false}
    //     }
    // },
    calculable: true,
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        axisLabel: {
          rotate: 30,
          color: '#8D8E90',
          fontSize: 12
        },
        // data : ['周一','周二','周三','周四','周五','周六','周日']
        data: props.chartDatax
      }
    ],
    yAxis: [
      {
        // min: (props.chartDatay.reduce((a, b) => Math.min(a, b)) * 0.8).toFixed(fixedNumber),
        // max: (props.chartDatay.reduce((a, b) => Math.max(a, b)) * 1.2).toFixed(fixedNumber),
        
        min: (props.chartDatay.reduce((a, b) => Math.min(a, b)) * 0.95).toFixed(fixedNumber),
        max: (props.chartDatay.reduce((a, b) => Math.max(a, b)) * 1.05).toFixed(fixedNumber),
        // interval:((props.chartDatay.reduce((a, b) => Math.max(a, b))-props.chartDatay.reduce((a, b) => Math.min(a, b)))/7),
        interval: averageNumber,
        type: 'value',
        // 坐标轴线
        axisLine: {
          show: true,
          lineStyle: {
            color: '#999',
            width: 1
          },
        },
        axisLabel: {
          interval: 'auto',
          formatter: function (value: any) {
            return value.toFixed(fixedNumber);
          }
        },
        // splitNumber:4  //坐标轴的分割段数
      }
    ],
    series: [
      {
        name: '',
        type: 'line',
        symbol: 'none',
        lineStyle: {
          color: '#FFC200', // 这里设置为红色
          width: 2, // 线条宽度
        },
        // smooth:true,
        // itemStyle: {normal: {areaStyle: {type: 'default'}}},
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0, color: '#FFF2C8' // 0% 处的颜色
              },
              {
                offset: 1, color: '#FFFfff' // 0% 处的颜色
              },
            ],
            global: false // 缺省为 false
          }
        },
        // data:[1320, 1132, 601, 234, 120, 90, 20]
        data: props.chartDatay,
        markLine: {
          data: [
            { name: '标记线', yAxis: props.standard?.min, lineStyle: { color: 'blue' }, label: { color: 'blue', fontSize: 10 } },
            { name: '标记线', yAxis: props.standard?.max, lineStyle: { color: 'red' }, label: { color: 'red', fontSize: 10 } }
          ],
          symbol: 'none'
        },

      }
    ]
  }
  myChart.setOption(options);
  window.addEventListener("resize", function () {
    myChart.resize()

  })
  window.onReset = myChart.resize

}

onMounted(() => {
  //   window.onload = () => {
  //     initPieEcharts();
  // }
  setTimeout(() => {
    initPieEcharts();
  }, 100)
});


</script>
<style lang="scss" scope>
.tooltipValue {
  font-weight: 500;
  font-size: 14px;
  color: #FFC200;
  line-height: 16px;
  text-align: left;
  font-style: normal;
  text-transform: none;
}

.tooltipTime {
  font-weight: 400;
  font-size: 10px;
  color: #999999;
  line-height: 12px;
  text-align: left;
  font-style: normal;
  text-transform: none;
}
</style>
